<template>
    <div class="infoCoantainer">
        <div class="exerciseAndStep">
            <div class="exercise">
                <p class="title">锻炼</p>
                <div class="exerciseImg img"></div>
                <p class="exerciseNum">{{ exerciseNum }}<span class="exerciseIndex index">分钟</span></p>
            </div>
            <div class="step">
                <p class="title">步数</p>
                <div class="stepImg img"></div>
                <p class="stepNum">{{ stepNum }}<span class="stepIndex index">步</span></p>
            </div>
        </div>
        <div class="food">
            <p class="title">饮食</p>
            <div class="foodImg img"></div>
            <div class="foodShow">
                <van-circle
                    class="myCircle"
                    v-model="circleFoodNum"
                    :rate="circleFoodNum"
                    :stroke-width="60"
                    text=""
                    :color="gradientColor"
                    layer-color="#F6F8FA"
                >
                    <template slot="default">
                        <div class="foodShowContent">
                            <p class="foodNum">{{ foodNum }}</p>
                            <p class="foodIndex index">千卡</p>
                        </div>
                    </template>
                </van-circle>
            </div>
        </div>
        <div class="menstruation">
            <p class="title">月经</p>
            <div class="yesOrNo">
                <p class="yes" :style="isShow ? {background:'linear-gradient(to right,rgb(251, 167, 135),rgb(241, 116, 105))',color:'#FFF'} : {background:'none',color:'#333333'}"
                @click="ifShow"
                >是</p>
                <p class="no" :style="!isShow ? {background:'linear-gradient(to right,rgb(251, 167, 135),rgb(241, 116, 105))',color:'#FFF'} : {background:'none',color:'#333333'}"
                @click="ifShow"
                >否</p>
            </div>
            <div class="menstruationImg img"></div>
            <p class="menstruationTime">{{ month }}月{{ day }}日始</p>
            <p class="before">上次 {{ beforeStartMonth }}月{{ beforeStartDay }}日-{{ beforeEndMonth }}月{{ beforeEndDay }}日</p>
            <p class="history">历史时间 ></p>
        </div>
        <div class="weight">
            <p class="title">体重</p>
            <div class="weightImg img"></div>
            <p class="weightNum">{{ weightNum }}<span class="weightIndex index">kg</span></p>
            <p class="target"><span class="targetFirstIndex index">目标</span>{{ target }}<span class="targetSecondIndex index">kg</span></p>
            <p class="history">历史体重 ></p>
        </div>
        <div class="height">
            <p class="title">身高</p>
            <p class="heightNum">{{ heightNum }}<span class="heightIndex index">cm</span></p>
            <div class="heightImg img"></div>
        </div>
        <div class="bmi">
            <p class="title">BMI</p>
            <p class="situation">{{ situation }}</p>
            <div class="bmiImg img"></div>
            <p class="bmiNum">{{ bmiNum }}<span class="bmiIndex index">kg/㎡</span></p>
        </div>
    </div>
</template>

<script>
    import { Circle } from 'vant';
    export default {
        name:'myInfo',
        components:{
            'van-circle':Circle
        },
        data(){
            return{
                foodNum:1080,
                exerciseNum:150,
                stepNum:3294,
                month:12,
                day:14,
                beforeStartMonth:11,
                beforeStartDay:14,
                beforeEndMonth:11,
                beforeEndDay:20,
                weightNum:50,
                target:45,
                heightNum:155,
                situation:'正常',
                bmiNum:20.8,
                isShow:true,
                gradientColor: {
                    '0%': 'rgb(251, 189, 54)',
                    '100%': 'rgb(245, 88, 82)',
                },
            }
        },
        methods:{
            ifShow(){
                this.isShow=!this.isShow
            }
        },
        computed:{
            circleFoodNum(){
                return this.foodNum/100*7
            }
        }
    }
</script>


<style scoped>
    .infoContainer{
        width: 100%;
    }
    .exerciseAndStep{
        margin-top: .36rem;
        margin-left: .32rem;
        width: 3.4rem;
        float: left;
    }
    .exerciseAndStep>div{
        background-color: #FFF;
        border-radius: .2rem;
        width: 3.4rem;
        height: 1.8rem;
        position: relative;
    }
    .exercise{
        margin-bottom: .2rem;
    }
    .title{
        color:#333333;
        position: absolute;
        left: .3rem;
        top:.3rem;
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .index{
        font-family: 'PingFangSC-Regular';
        color:#33333375;
        font-size: .26rem;
    }
    .img{
        width: .6rem;
        height: .6rem;
        border-radius:.2rem;
        background-position: center;
        background-size: contain;
        position: absolute;
        right: .3rem;
        top:.3rem;
    }
    .exerciseNum{
        position: absolute;
        left: .3rem;
        top:1rem;
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        display: flex;
        align-items: center;
    }
    .exerciseIndex{
        margin-left: .1rem;
        font-size: .26rem;
    }
    .stepNum{
        position: absolute;
        left: .3rem;
        top:1rem;
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        display: flex;
        align-items: center;
    }
    .stepIndex{
        margin-left: .1rem;
        font-size: .26rem;
    }
    .exerciseImg{
        background-image: url(../assets/img/2-icon@2x/2-3exerciseIcon.png);
    }
    .stepImg{
        background-image: url(../assets/img/2-icon@2x/2-6stepIcon.png);
    }
    .foodImg{
        background-image: url(../assets/img/2-icon@2x/2-2foodIcon.png);
    }
    .menstruationImg{
        background-image: url(../assets/img/2-icon@2x/2-4menstruationIcon.png);
    }
    .weightImg{
        background-image: url(../assets/img/2-icon@2x/2-7weightIcon.png);
    }
    .heightImg{
        background-image: url(../assets/img/2-icon@2x/2-8heightIcon.png);
    }
    .bmiImg{
        background-image: url(../assets/img/2-icon@2x/2-5BMIicon.png);
    }
    .food{
        background-color: #FFF;
        margin-top: .36rem;
        margin-left: .2rem;
        width: 3.4rem;
        height: 3.8rem;
        float: left;
        border-radius: .2rem;
        position: relative;
    }
    .foodShow{
        width: 2rem;
        height: 2rem;
        margin: 0 auto;
        margin-top: 1.2rem;
        border-radius: 50%;
        background-color: #F6F8FA;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .myCircle{
        display: flex;
        align-items: center;
        justify-content: center;
        color:#333333;
    }
    .foodShowContent{
        background-color: #FFF;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .foodNum{
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        margin-top: .6rem;
    }
    .foodIndex{
        font-size: .26rem;
        margin-top: 2px;
    }
    .menstruation{
        background-color: #FFF;
        margin-top: .2rem;
        margin-left: .32rem;
        width: 7rem;
        height:2.2rem;
        float: left;
        border-radius: .2rem;
        position: relative;
    }
    .yesOrNo{
        background-color: #F6F8FA;
        width: 1.2rem;
        height: .6rem;
        position: absolute;
        top:.2rem;
        left: 1.2rem;
        display: flex;
        border-radius: .1rem;
    }
    .yesOrNo>p{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Regular';
        font-size: .26rem;
        border-radius: .1rem;
        transition: all 0.5s;
    }
    .menstruationTime{
        position: absolute;
        left: .3rem;
        top:1rem;
        font-family: 'PingFangSC-Mediuem';
        font-size: .36rem;
    }
    .before{
        position: absolute;
        left: .3rem;
        top:1.65rem;
        color:#33333375;
        font-family: 'PingFangSC-Regular';
        font-size: .26rem;
    }
    .history{
        position: absolute;
        right: .3rem;
        top:1.65rem;
        color:#33333375;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .weight{
        background-color: #FFF;
        margin-top: .2rem;
        margin-left: .32rem;
        width: 7rem;
        height:2.2rem;
        float: left;
        border-radius: .2rem;
        position: relative;
    }
    .weightNum{
        position: absolute;
        left: .3rem;
        top:1rem;
        font-family: 'PingFangSC-Mediuem';
        font-size: .36rem;
    }
    .weightIndex{
        margin-left: .1rem;
    }
    .target{
        position: absolute;
        left: .3rem;
        top: 1.55rem;
        font-size: .36rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .targetFirstIndex{
        margin-right: .1rem;
    }
    .targetSecondIndex{
        margin-left: .1rem;
    }
    .height{
        background-color: #FFF;
        margin-top: .2rem;
        margin-left: .32rem;
        float: left;
        border-radius: .2rem;
        width: 3.4rem;
        height: 1.8rem;
        position: relative;
    }
    .heightNum{
        position: absolute;
        left: .3rem;
        top:1rem;
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .heightIndex{
        margin-left: .1rem;
    }
    .bmi{
        background-color: #FFF;
        margin-top: .2rem;
        margin-left: .2rem;
        float: left;
        border-radius: .2rem;
        width: 3.4rem;
        height: 1.8rem;
        position: relative;
    }
    .situation{
        position: absolute;
        left: 1.1rem;
        top:.4rem;
        color:#33333375;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .bmiNum{
        position: absolute;
        left: .3rem;
        top:1rem;
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .bmiIndex{
        margin-left: .1rem;
    }
</style>